<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <my-header></my-header>
        <my-header></my-header>
        <my-header></my-header>
        <my-header></my-header>
        <my-main></my-main>
        <my-footer></my-footer>
    </div>




    <template id="header">
        <div>
            <h4>我是标题</h4>
        </div>
    </template>

    <template id="main">
        <div>
            <h4>我是内容区域</h4>
        </div>
    </template>

    <template id="footer">
        <div>
            <h4>我是底部</h4>
        </div>
    </template>
    

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        const Header = {
            // template: "<div>123</div>"
            // 如果不使用template: "html结构"   在页面中通过template标签来进行包裹
            template: "#header",
            data() {
                return {
                    msg: "123"
                }
            }
        }

        const Main = {
            // template: "<div>123</div>"
            // 如果不使用template: "html结构"   在页面中通过template标签来进行包裹
            template: "#main",
            data() {
                return {
                    msg: "123"
                }
            }
        }

        const Footer = {
            // template: "<div>123</div>"
            // 如果不使用template: "html结构"   在页面中通过template标签来进行包裹
            template: "#footer",
            data() {
                return {
                    msg: "123"
                }
            }
        }

        Vue.component('my-header', Header)
        Vue.component('my-main', Main)
        Vue.component('my-footer', Footer)

        new Vue({
            // 元素
            el: "#app",
            
        })
    </script>
</body>
</html>